import React from 'react';

interface GradientBackgroundProps {
  children: React.ReactNode;
  className?: string;
  gradientType?: 'linear' | 'radial';
  direction?: string;
  colors?: string[];
  animate?: boolean;
}

const GradientBackground: React.FC<GradientBackgroundProps> = ({ 
  children, 
  className = '',
  gradientType = 'linear',
  direction = '135deg',
  colors = ['rgba(97, 220, 163, 0.1)', 'rgba(24, 144, 255, 0.1)'],
  animate = false
}) => {
  const gradient = gradientType === 'linear' 
    ? `linear-gradient(${direction}, ${colors.join(', ')})`
    : `radial-gradient(${colors.join(', ')})`;

  return (
    <div 
      className={className}
      style={{ 
        background: gradient,
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      {animate && (
        <div 
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: `linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)`,
            animation: 'shimmer 3s infinite linear',
          }}
        />
      )}
      {children}
      <style>{`
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
      `}</style>
    </div>
  );
};

export default GradientBackground;